<!--  -->
<template>
  <div class="login">
    <!-- <HeaderTop title="更改手机号"></HeaderTop> -->
    <form class="login-wrapper" @submit.prevent="phoneNum">
      <section class="login_verification">
        <input type="tel" maxlength="8" placeholder="填写验证码" class="veri" v-model="oldSMS">
        <div class="get_verification" :class="{btn1: isGray == true}" @click="oldphone">{{computeTime > 0 ? `已发送(${computeTime}s)` : '获取验证码'}}</div>
      </section>
      <section class="login_message">
        <input type="tel" maxlength="11" placeholder="输入手机号" v-model="phone" class="tel">
        <div class="get_verification" :class="{btn1: isGray1 == true}"  @click="newphone">{{computeTime1 > 0 ? `已发送(${computeTime1}s)` : '获取验证码'}}</div>
      </section>
      <section class="login_verification">
        <input type="tel" maxlength="8" placeholder="填写验证码" class="veri" v-model="newSMS">
      </section>
      <button class="login_submit">确定</button>
    </form>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
import { clearInterval, setInterval } from 'timers';
export default {
  data () {
    return {
      computeTime:0, //旧手机倒计时时间
      computeTime1:0,//新手机倒计时时间
      userId:null,
      token:'',
      phone:'',
      newSMS:'',
      oldSMS:'',
      isGray:false, //颜色
      isGray1:false, //颜色
    };
  },

  // components: {
  //   HeaderTop
  // },
  mounted(){
      this.userId = this.userInfo.userInfo.id
      this.token = this.userInfo.token
  },
  computed: {
      ...mapState(['userInfo'])
  },

  methods: {
    async oldphone(){
      if(!this.computeTime){ // 倒计时不是0才能倒计时
        this.computeTime = 120
        this.isGray = true
        this.IntervalId = setInterval(()=>{
          this.computeTime --
          if(this.computeTime <= 0){
            clearInterval(this.IntervalId)
            this.isGray = false
          }
        },1000)
        const {userId,token} = this
        const result = await this.API.reqChangeOld({userId,token})
        console.log('我是旧手机的验证码',result)
        if(result.retCode !== '000'){
          this.$toast(result.retMsg);
          // this.$dialog.alert({
          //   message: result.retMsg
          // })
          // 停止倒计时
          if(this.computeTime){
            this.computeTime = 0
            clearInterval(this.IntervalId)
            this.IntervalId = undefined
          }
        }
      }
    },
    async newphone(){
      if(!this.phone){
        this.$toast('请输入手机号');
        // this.$dialog.alert({
        //   message: '请输入手机号'
        // })
      }else{
        if(!this.computeTime1){ // 倒计时不是0才能倒计时
        this.computeTime1 = 120
        this.isGray1 = true
        this.IntervalId1 = setInterval(()=>{
          this.computeTime1 --
          if(this.computeTime1 <= 0){
            clearInterval(this.IntervalId1)
            this.isGray1 = false
          }
        },1000)
        const {userId,token,phone} = this
        console.log(userId,token,phone)
        const result = await this.API.reqChangeNew({userId,token,phone})
        console.log('我是新手机的验证码',result)
        if(result.retCode !== '000'){
          this.$toast(result.retMsg);
          // this.$dialog.alert({
          //   message: result.retMsg
          // })
          // 停止倒计时
          if(this.computeTime1){
            this.computeTime1 = 0
            clearInterval(this.IntervalId1)
            this.IntervalId1 = undefined
          }
        }
      }
      }
    },
    async phoneNum(){
        const {userId,token,phone,newSMS,oldSMS} = this
        console.log(userId,token,phone,newSMS,oldSMS)
        console.log('新手机',phone)
        if(!newSMS || !oldSMS){
          this.$toast('输入验证码');
          // this.$dialog.alert({
          //   message: '输入验证码'
          // })
          return 
        }
        const result = await this.API.reqChangePhone({userId,token,phone,newSMS,oldSMS})
        console.log('我是确定按钮',result)
        if(result.retCode === '000'){
          // 重新登录
          this.$toast('换绑成功 请重新登录');
          // this.$dialog.alert({
          //   message: '换绑成功 请重新登录'
          // })
          this.$router.replace('/login')
        }
        if(result.retCode !== '000'){
          this.$toast(result.retMsg);
          // this.$dialog.alert({
          //   message: result.retMsg
          // })
        }
    },
  }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.login
  // margin-top 45px
  padding-bottom 0 !important
  overflow hidden
  width 100%
  height 100%
  background #fff
  .login-wrapper
    width 100%
    height 100%
    // top-border-1px(#e4e4e4)
    display flex
    align-items center
    flex-direction column
    padding-top 35px
    button 
      padding 0
      margin 0
      border:1px solid transparent
      outline none
    section
      border 1px solid #e4e4e4
      width 305px
      border-radius 100px
      overflow hidden
      height 47px
      margin-bottom 26px
      display flex
      justify-content space-between
      input 
        background-repeat no-repeat
        background-size 26px 28px
        background-position 15px 10px
        height 47px
        padding-left 50px
        line-height 47px
        font-size 14px
        width 160px
        &.tel
          background-image url(../../assets/img/tell.png)
        &.veri
          background-image url(../../assets/img/num.png)
        &.pw
          background-image url(../../assets/img/mima.png)
      .get_verification
        width 100px
        background #145B3E
        color #fff
        height 47px
        line-height 47px
        text-align center
        font-size 12px
        &.btn1
            background #656565
    .login_submit
      border 1px solid #e4e4e4
      width 305px
      border-radius 100px
      height 47px
      background #145B3E
      color #fff
      margin-top 25px
</style>